<template>
	<view class="flex-column">
		<view v-for="(item,index) in list" :key="index" class="upload-item">
			<view class="flex-row" style="margin-left: 16px;">
				<image src="../../static/uploadIcon.png" style="width: 40px; height: 40px; min-width: 40px;"></image>
				<view class="flex-column flex-center" style="margin-left: 12px;">
					<view class="font-14 font-weight-medium" style="color: #344054;">
						{{ item.fileName }}
					</view>
					<view v-if="$uv.test.empty(item.size)" class="font-14 font-weight-regular" style="color: #475467;">
						{{ item.size }}
					</view>
				</view>
			</view>
			<image src="../../static/uploadDel.png"
				style="width: 20px; height: 20px; margin-right: 15px; margin-left: 10px; min-width: 20px;"
				@click="del(index)"></image>
		</view>
		<view v-if="list.length < maxCount" class="upload-add flex-column-center" @click="add">
			<view class="flex-row-center upload-add_icon">
				<image src="../../static/upload.png" style="width: 20px; height: 20px;"></image>
			</view>
			<view class="upload-add_title">
				点击上传
			</view>
			<view class="font-12 font-weight-regular" style="color: #313C56; margin-top: 4px;">
				Word、Excel 、PDF
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "upload-file",
		emits: ['delete', 'choosedFile'],
		props: {
			maxCount: {
				type: Number,
				default: 5,
			},
			// 显示已上传的文件列表
			fileList: {
				type: Array,
				default: () => []
			},
		},
		data() {
			return {
				list: []
			};
		},
		watch: {
			// 监听文件列表的变化，重新整理内部数据
			fileList: {
				deep: true,
				immediate: true,
				handler() {
					this.formatFileList()
				}
			},
		},
		methods: {
			del(index) {
				this.$emit('delete', {
					index: index
				})
			},
			add() {
				try {
					console.log('进来了')
					let that = this
					uni.chooseFile({
						count: 1, //默认100
						extension: ['.pdf', '.doc', '.docx', '.xlsx', '.xls'],
						success: function(res) {
							// console.log(res.tempFiles[0]);
							const fileObj = res.tempFiles[0]
							let sizeKB = fileObj.size / 1024.0
							let size = sizeKB < 1024 ? `${sizeKB.toFixed(1)} KB` :
								`${(sizeKB / 1024.0).toFixed(1)} M`
					
							let file = {
								fileName: fileObj.name,
								fileUrl: fileObj.path,
								size: size
							}
							that.$emit('choosedFile', file)
						},
						fail:function(err){
							console.log(err)
							const pages = getCurrentPages();
							const page = pages[pages.length - 1];
							const pageVM = page.$vm;
							pageVM.$nextTick(() => {
								pageVM.$refs.toast.show({
									msg: '该钱包暂时不支持文件上传!'
								})
							});
						}
					});
				} catch (error) {
					console.log(error)
					const pages = getCurrentPages();
					const page = pages[pages.length - 1];
					const pageVM = page.$vm;
					pageVM.$nextTick(() => {
						pageVM.$refs.toast.show({
							msg: '该钱包暂时不支持文件上传!'
						})
					});
				}
				
				
				

			},

			formatFileList() {
				if (this.list >= this.maxCount) {
					this.list = this.fileList.slice(0, this.maxCount - 1)
				} else {
					this.list = this.fileList
				}
			},
		}
	}
</script>

<style lang="scss">
	.upload-item {
		height: 96px;
		width: 100%;
		margin-top: 12px;
		border-radius: 12px;
		border: 1px solid #EAECF0;
		background-color: white;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.upload-add {
		margin-top: 12px;
		width: 100%;
		height: 126px;
		background: #FFFFFF;
		border-radius: 12px;
		opacity: 1;
		border: 1px solid #EFF0F4;
	}

	.upload-add_icon {
		width: 40px;
		height: 40px;
		background: #FFFFFF;
		box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
		border-radius: 8px 8px 8px 8px;
		opacity: 1;
		border: 1px solid #D4D7DB;
	}

	.upload-add_title {
		margin-top: 10px;
		font-size: 14px;
		font-weight: 500;
		color: #0066FF;
	}
</style>